<template>
	<div class="mui-inner-wrap mui-transitioning">
	<div class="b"></div>
	<br><br>
	<div class="weui-cells weui-cells_radio">
		<label class="weui-cell weui-check__label" for="x12">
	    <div class="weui-cell__bd">
			<a href="https://www.alipay.com">
	      <p style="font-size: 1rem;">支付宝支付</p>
		   </a>
	    </div>
	    <div class="weui-cell__ft">
	      <input type="radio" class="weui-check" name="radio1" id="x12">
	      <span class="weui-icon-checked"></span>
	    </div>
	  </label>
	</div>
	<div class="weui-cells weui-cells_radio">
		<label class="weui-cell weui-check__label" for="x13">
	    <div class="weui-cell__bd">
			<a href="https://weixin.qq.com">
	      <p style="font-size: 1rem;">微信支付</p>
		  </a>
	    </div>
	    <div class="weui-cell__ft">
	      <input type="radio" class="weui-check" name="radio1" id="x13">
	      <span class="weui-icon-checked"></span>
	    </div>
	  </label>
	</div>
	</div>
</template>

<script>
</script>

<style scoped>
	input,
	button,
	select,
	textarea {
		outline: none;
	}
	
	html,
	body {
		margin: 0;
		padding: 0;
	}
	
	html {
		height: 100%;
	}
	
	body {
		background-color: #EFEFF4;
		display: flex;
		flex-direction: column;
		min-height: 100%;
		text-decoration: none;
	}
	
	ul {
		list-style-type: none;
		font-size: 1.875rem;
		margin-top: 0;
		padding: 0;
		position: absolute;
		width: 1.875rem;
	}
	
	li a {
		display: block;
		color: #000;
		padding: 0.0625rem 0.125rem;
		text-decoration: none;
	}
	
	
	
	
	
	.b {
		background-color: #EFEFF4;
		width: 100%;
		height: 1.8rem;
	}
	
	.buy-confirm {
		width: 100%;
		height: 3.75rem;
		position: absolute;
		bottom: 0;
		background:  -webkit-linear-gradient(left top , #fefe78,#c0ebd7);
		background: -webkit-linear-gradient(left,rgba(254,254,120,0.3),rgba(192,235,215,0.5));
	}
	
	.common-part {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		background-color: #000000;
		/*父块透明，子块不透明，用rgba*/
		background: rgba(0, 0, 0, 0.3);
		z-index: 100;
	}
	
	.common-dialog {
		width: 80%;
		margin: 20% auto;
		text-align: center;
		background: #ffffff;
		z-index: 100;
		opacity: 1;
		border-radius: .5rem;
		border: 1px solid #f2f2f2;
		left: calc(50% - 3.6rem);
		left: -moz-calc(50% - 3.6rem);
		left: -webkit-calc(50% - 3.6rem);
	}
	
	.pay-part {
		display: none;
	}
	
	.pay-dialog {
		height: 15rem;
	}
	
	.dialog-title {
		line-height: 3rem;
		color: #333333;
		font-size: 1rem;
		border-bottom: 1px solid #f2f2f2;
	}
	
	.pay-money {
		color: #333333;
		font-size: 1.2rem;
		margin: .8rem 0;
		font-weight: bold;
	}
	
	.pay-password {
		width: 88%;
		height: 3rem;
		border: 1px solid #999999;
		margin: 0 auto;
		position: relative;
	}
	
	.pay-password .real-ipt {
		width: 100%;
		height: 3rem;
		line-height: 3rem;
		opacity: 0;
		z-index: 100;
	}
	
	.pay-password .surface-ipts {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 3rem;
		line-height: 3rem;
		z-index: 100;
		overflow: hidden;
	}
	
	.pay-password .surface-ipts .surface-ipt {
		height: 3rem;
		line-height: 3rem;
		display: flex;
		justify-content: space-between;
	}
	
	.pay-password .surface-ipts .surface-ipt input {
		width: 14.66667%;
		height: 3rem;
		line-height: 3rem;
		border: 0;
		border-right: 1px solid #999999;
		color: #333333;
		font-size: .9rem;
		text-align: center;
		padding: 0;
	}
	
	.pay-part .btns {
		margin: .48rem 0;
		background-color: ;
	}
	
	.cancel-btn {
		position: relative;
		bottom: -2rem;
		right: 10%;
		width: 17%;
		height: 2rem;
		line-height: 2rem;
		color: #7BBE9B;
		font-size: 1rem;
		border: 1px solid #7BBE9B;
		border-radius: 0.5rem;
	}
	
	.confirm-btn {
		position: relative;
		bottom: -2rem;
		left: 10%;
		width: 17%;
		height: 2rem;
		line-height: 2rem;
		color: #fff;
		background-color: #7BBE9B;
		font-size: 1rem;
		border: 1px solid #7BBE9B;
		border-radius: 0.5rem;
	}
	.mui-icon.mui-icon-back{
		color: #3F4D3F;
		float: left;
	}
</style>
